<div ng-init="init();" class="kmi-layout-content IIoT0107-content">
    <!-- 標題列-->
    <div class="kmi-header-row">
        <!-- 返回按鈕 -->
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
        </div>
        <!-- 程式名稱 -->
        <div class="header-title" ng-bind="'IIoT0107.title' | translate"></div>
        <!-- 左上角的logo -->
        <div class="header-logo"></div>
    </div>
    <!-- 程式內容-->
    <div class="kmi-layout-main-content" style="padding:5px;">
        <div class="kmi-layout-page" ng-show="mode == 'query'">
            <div class="kmi-report-panel"></div>
            <div class="report_content">
                <div class="kmi-list column-selector" column-selector-id="IIoT0107_data">
                    <div class="kmi-list__header"
                        style="text-align: center;justify-content:center;align-items: center;">
                        <div class="kmi-list__column" style="flex: 0 0 100px;"
                            ng-bind="'IIoT0107.data_column.column_8' | translate"></div>
                        <div class="kmi-list__column" style="flex:0 0 84px;">
                        </div>
                        <div class="kmi-list__column" style="flex: 1"
                            ng-bind="'IIoT0107.data_column.column_1' | translate"></div>
                        <div class="kmi-list__column" style="flex: 1;"
                            ng-bind="'IIoT0107.data_column.column_2' | translate"></div>
                        <div class="kmi-list__column" style="flex: 1;"
                            ng-bind="'IIoT0107.data_column.column_3' | translate"></div>
                        <div class="kmi-list__column" style="flex: 1;"
                            ng-bind="'IIoT0107.data_column.column_4' | translate"></div>
                        <div class="kmi-list__column" style="flex: 1;"
                            ng-bind="'IIoT0107.data_column.column_5' | translate"></div>
                        <div class="kmi-list__column" style="flex: 1;"
                            ng-bind="'IIoT0107.data_column.column_9' | translate"></div>
                        <div class="kmi-list__column" style="flex: 1;"
                            ng-bind="'IIoT0107.data_column.column_6' | translate"></div>
                        <div class="kmi-list__column" style="flex: 1;"
                            ng-bind="'IIoT0107.data_column.column_7' | translate"></div>
                    </div>
                    <div class="kmi-list__row-content">
                        <div class="kmi-list__row"
                            style="text-align: center;justify-content:center;align-items: center;"
                            ng-repeat="eq_item in equipment_dispatch_loading_info track by $index">
                            <div class="kmi-list__column kmi-column-button"
                                ng-click="chagnge_dis_work_date(eq_item, $event);" style="flex: 0 0 100px">
                                <label ng-bind="'IIoT0107.dis_btn' | translate"></label>
                                <div class="kmi-can-click" style="z-index: 2;"></div>
                            </div>
                            <div class="kmi-list__column column-border" style="flex:1;">
                                <div class="dashboard-light-panel"
                                    ng-class="[get_equipment_state_class(eq_item.equipment_state)]">
                                    {{('IIoT0107.machine_status.'+ eq_item.equipment_state | translate).substr(0, 1)}}
                                </div>
                            </div>
                            <div class="kmi-list__column column-border" style="flex:1">
                                <div class="dashboard-light-panel"
                                    ng-class="[get_loading_state_class(eq_item.loading_state)]">
                                </div>
                            </div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="eq_item.equipment_no">
                            </div>
                            <div class="kmi-list__column column-border" style="flex:1;"
                                ng-bind="eq_item.equipment_name"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="eq_item.work_date">
                            </div>
                            <div class="kmi-list__column column-border" style="flex:1;"
                                ng-bind="eq_item.loading_rate + '%'"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="eq_item.plan_end_time">
                            </div>
                            <div class="kmi-list__column column-border" style="flex:1;"
                                ng-bind="eq_item.available_capacity"></div>
                            <div class="kmi-list__column column-border" style="flex:1;"
                                ng-bind="eq_item.dispatch_capacity"></div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="kmi-layout-page" ng-show="mode == 'print'" style="padding: 0;">
            <iframe id="kmi-pdf-panel" name="kmi-pdf-panel"></iframe>
        </div>
        <div class="kmi-layout-footer" ng-show="mode == 'query'">

        </div>

    </div>
</div>